<template>
  <div>
    <el-breadcrumb separator="/"> <!--面包屑never-->
      <el-breadcrumb-item :to="{ path: '/TestPlan'}"><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>试验方案</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card shadow="always">
        <el-row>
          <el-col :span="4">
            <el-row class="subtitle">试验方案</el-row>
            <el-row class="numberOfStatistics">{{numberOfTestPlan}}<span class="unitOfStatistics">个</span></el-row>
          </el-col>
          <el-col :span="4">
            <el-row class="subtitle">执行次数</el-row>
            <el-row class="numberOfStatistics">{{numberOfExecutions}}<span class="unitOfStatistics">次</span></el-row>
          </el-col>
          <el-col :span="8" :offset="8" style="margin-top: 10px;">
            <el-input placeholder="请输入方案名称进行搜索" clearable v-model="searchContent" @input="getSearchTableData" size="small"></el-input>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="always" class="cardPosition"><!--方案列表-->
      <el-row>
        <el-col :span="24" class="newPlanButton">
          <el-button type="text" class="global_add" :disabled="btnList.add" @click="toEditOrNewTestPlan" size="small">+&nbsp;新增方案</el-button>
        </el-col>
      </el-row>
        <el-table v-loading="dataLoading" :data="testPlanTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;">
          <el-table-column type="index" label="#" :index = '(index) =>{return (index + 1) + (currentPage - 1) * pagesize}' width="70" align="center"></el-table-column>
          <el-table-column property="planName" label="方案名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="createTime" label="创建时间" align="center" width="300" show-overflow-tooltip></el-table-column>
          <el-table-column property="cnt" label="执行次数" align="center" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column property="operation" label="操作" align="center" width="350">
            <template slot-scope="scope">
              <el-button type="text" class="global_add" :disabled="btnList.run" @click="toRunning(scope.$index, scope.row)">运行测试</el-button><el-divider direction="vertical"></el-divider>
              <el-button type="text" class="global_add" :disabled="btnList.edit" @click="toEditor(scope.$index, scope.row)">编辑方案</el-button><el-divider direction="vertical"></el-divider>
              <el-button type="text" class="global_add" :disabled="btnList.copy" @click="toCopy(scope.$index, scope.row)">复制方案</el-button><el-divider direction="vertical"></el-divider>
              <el-button type="text" class="global_add" :disabled="btnList.delete" @click="toDelete(scope.$index, scope.row)">删除方案</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pagination" background :current-page.sync="currentPage" :hide-on-single-page="showPagination" :page-size="pagesize" layout="prev, pager, next" :total="testPlanTableData.length"></el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import sessionStorage from '../../public/storage.js';
import roleBtn from '../../public/means.js';
export default {
  data() {
    return {
      btnList: {
        add: false,
        edit: false,
        delete: false,
        run: false,
        copy: false
      },
      menuId: 19,
      dataLoading: false,
      showPagination: true,     //分页显示
      currentPage: 1,           //从第几页开始显示
      pagesize: 10,              //每页多少行数据
      numberOfTestPlan: null,   //测试方案数量
      numberOfExecutions: null, //执行次数
      searchContent: '',        //搜索框
      testPlanTableData: [],     //测试方案表数据
    };
  },
  methods: {
    //获取方案总数和执行总次数
    async getTotalNumberOfTestPlanAndExecution(){
      const params={
        userId:JSON.parse(sessionStorage.getItem('userInfo')).user_id,
      };
      const ret = await this.$http.get("/testPlan/getTotalNumberOfPlanAndExecution",{params,});
      this.numberOfTestPlan = ret.result.numberOfTestPlan;
      this.numberOfExecutions = ret.result.numberOfExecutions;
    },
    //获取方案列表
    async getTestPlanTableData(){
      this.dataLoading = true;
      const params={
        searchTest:this.searchContent
      };
      const ret = await this.$http.get("/testPlan/getTestPlanList",{params,});
      this.testPlanTableData = ret.result;
      this.dataLoading = false;
    },
    //搜索框事件
    getSearchTableData(){
      this.getTestPlanTableData();
    },
    //跳转至新建测试方案
    toEditOrNewTestPlan(){
      this.$router.push({
        path:'/EditOrNewTestPlan',
        query:{
          sign: 'new'
        }
      });
    },
    //编辑方案时判断方案是否正在运行
    async judgePlanRunning(planId,planName,planDesc){
      const params = {
        'planId': planId,
        'type': 0
      }
      const ret = await this.$http.get("/testPlan/ifRunningTestPlan",{params,});
      if(ret.code === 200){
        this.$router.push({
          path:'/EditOrNewTestPlan',
          query:{
            'sign': 'edit',
            'planId': planId,
            'planName': planName,
            'planDesc': planDesc
          }
        });
      }
    },
    //跳转至方案编辑
    toEditor(index,row){
      this.judgePlanRunning(row.planId,row.planName,row.planDesc);
    },
    //判断该方案是否可以进入运行测试界面
    async judgeRunningTest(planId,planName){
      const params = {
        userId:JSON.parse(sessionStorage.getItem('userInfo')).user_id,
        'planId': planId,
        'type': 1
      }
      const ret = await this.$http.get("/testPlan/ifRunningTestPlan",{params,});
      if(ret.code === 200){
        this.$router.push({
          path:'/TestPlanRunning',
          query:{
            'planName': planName,
            'sign': 'testPlan',
            'planId': planId,
            update: 0,
          }
        });
      }
    },
    //跳转至运行测试
    toRunning(index, row){
      this.judgeRunningTest(row.planId,row.planName);
    },
    //复制方案
    async toCopy(index,row){
      const params = {
        'planId': row.planId,
      }
      const ret = await this.$http.post("/testPlan/copyTestPlan",params);
      if(ret.code === 200){
        this.getTotalNumberOfTestPlanAndExecution();
        await this.getTestPlanTableData();
        this.$message.success('复制方案成功！')
      }
    },
    //删除测试方案
    toDelete(index,rows){
      this.$confirm('确定删除该方案,此操作不可撤销', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(({ result }) => {
        if(!result){
					this.delectTestPlan(index,rows);
				}
      }).catch(() => {
        });
    },
    //删除测试方案接口
    async delectTestPlan(index,rows){
      let ret;
      const params = {
        'planId': rows.planId
      }
      ret = await this.$http.post("/testPlan/deletTestPlan",params);
      if(ret.code === 200){
        this.getTotalNumberOfTestPlanAndExecution();
        this.getTestPlanTableData();
      }
    },
    async roleBtnList () {
      const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
      if(role_id){
        // 获取按钮权限状态
        let arr = await roleBtn.roleBtnList(role_id, this.menuId);
        this.btnList = arr;
      }
    }
	},
  created() {
    this.roleBtnList()
  },
  mounted() {
    this.getTotalNumberOfTestPlanAndExecution();
    this.getTestPlanTableData();
  }
};
</script>
<style lang="scss" scoped>
@import "./TestPlan.scss";
</style>
